<template>
	<view class="login_box">
		<view class="text_login">
			<!-- logo -->
			<image class="login_logo" src="../../static/images/logo1.png" alt="" />

			<!-- 表单区域 -->
			<view class="login_phone">
				<text>手机号</text>
				<input type="text" maxlength="11" v-model="phone" />
			</view>
			<view class="login_code">
				<text>验证码</text>
				<input type="text" maxlength="4" v-model="code" />
				<view hover-class="touchOpacity" @click="getCode">获取验证码</view>
			</view>

			<!-- 登录按钮 -->
			<view class="login_but" hover-class="touchOpacity" @click="login">
				<text space="ensp">登 录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '', //手机号
				code: '', //验证码
				codeflag: false, //
			}
		},
		methods: {
			// 获取验证码
			async getCode() {
				// 判断是否有手机号
				let phone = this.phone;
				if (!phone) {
					uni.showToast({
						title: '请填写手机号',
						icon: 'error'
					})
					return;
				}
				// 判断手机号是否符合条件
				let reg = /^1[3-9][0-9]{9}$/;
				console.log(reg.test(phone));
				if (reg.test(phone)) {
					// 手机号验证通过  发送验证码
					wx.showToast({
						title: '验证码已发送',
						icon: 'success'
					})
					// 调取验证码接口
					let result = await this.$http({
						url: '/sms',
						data: {
							phone,
						}
					})

					// 请求成功
					if (result.data.code == 200) {
						// 将验证码存储在本地
						uni.setStorageSync("code", result.data.list.code);
						// 将手机好存储在本地
						uni.setStorageSync("phone", this.phone);
						let num = 10
						let timer = setInterval(() => {
							num--;
							this.codeText = num + "秒后重新获取"
							if (num <= 1) {
								clearInterval(timer)
								num = 10;
								this.codeText = "获取验证码"
								this.codeflag = "true"
							}
						}, 1000)

					} else {
						// 手机号验证没有通过  提示用户
						uni.showToast({
							title: "获取验证码失败",
							icon: 'none'
						})
						this.codeflag = true
					}

					// } else {
					// 	// 手机号验证没有通过  提示用户
					// 	wx.showToast({
					// 		title: '获取验证码失败',
					// 		icon: 'error'
					// 	})
				}
			},
			// 登录
			async login() {
				// 获取手机号和验证码
				let phone = this.phone;
				let code = this.code;
				console.log(phone, code);
				// 验证手机号
				if (phone != uni.getStorageSync('phone')) {
					uni.showToast({
						title: '手机号输入错误',
						icon: 'erroe'
					})
					return;
				}

				// 判断验证码输入是否正确
				if (uni.getStorageSync('code') != code) {
					uni.showToast({
						title: '验证码输入错误',
						icon: 'error'
					})
					return;
				}
				// 调用登录接口
				let result = await this.$http({
					url: '/smsLogin',
					method: 'post',
					data: {
						phone
					}
				})
				console.log(result);
				// 登录成功
				if (result.data.code == 200) {
					wx.showToast({
						title: result.data.msg,
						icon: 'success'
					})
					// result.data.list.avatarurl = this.$baseUrl + result.data.list.avatarurl
					// 将信息存储在本地
					uni.setStorageSync('userInfo', result.data.list);

					// wx.getStorageSync('userInfo').avatarurl = this.$baseUrl + wx.getStorageSync('userInfo')
					// .avatarurl;
					// console.log(wx.getStorageSync('userInfo'));
					// 将登陆状态存储在本地
					wx.setStorageSync('isLogin', true);

					// 将用户信息存储在仓库
					this.$store.commit('changeUser', result.data.list);
					// 将登录状态存储在仓库
					this.$store.commit('changeLogin', true)

					// 将电话号和code码在本地移除
					uni.removeStorageSync('phone');
					uni.removeStorageSync('code');
					// 跳转首页
					setTimeout(function() {
						wx.switchTab({
							url: '/pages/index/index'
						})
					}, 2000)

				} else {
					// 登录失败
					uni.showToast({
						title: '登录失败',
						icon: 'erroe'
					})
				}


			}
		}
	}
</script>

<style>
	/* 引入样式 */
	/* @import url("@/static/css/textlogin.css"); */
	.login_box {
		height: 100%;
		background-color: #f2f2f2;
		overflow: hidden;
	}

	.text_login {
		background-color: #FFFFFF;
		margin: 20rpx 20rpx 0;
		height: 90vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login_logo {
		width: 364rpx;
		height: 96rpx;
		margin: 400rpx 0 88rpx 0;
	}

	.login_phone {
		height: 60rpx;
		width: 610rpx;
		border-bottom: 1rpx solid #CCCCCC;
		display: flex;
		color: #666666;
		font-size: 24rpx;
	}

	input {
		flex: 1;
		margin-left: 15rpx;
	}

	.login_code {
		height: 60rpx;
		width: 610rpx;
		border-bottom: 1rpx solid #CCCCCC;
		display: flex;
		justify-content: space-between;
		color: #666666;
		font-size: 24rpx;
		margin-top: 34rpx;

	}

	.login_code view {
		width: 160rpx;
		line-height: 48rpx;
		height: 48rpx;
		text-align: center;
		background-color: #CCCCCC;
		font-size: 20rpx;
		color: #FFFFFF;

	}

	.login_but {
		width: 610rpx;
		line-height: 49px;
		background-color: #CCCCCC;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-top: 40rpx;
	}
</style>